<template>
    <div >
        <!-- {{ route.params.id }} -->
        <div v-html="compiledMarkdown"></div>
    </div>
</template>

<script setup>
   import {computed} from 'vue'
   import { useRoute } from 'vue-router';
   import MarkdownIt from 'markdown-it';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/github.css';

   const route = useRoute();
   const md = new MarkdownIt({
      html: true,         // 允许HTML标签
      linkify: true,      // 自动转换URL为链接
      typographer: true,  // 美化排版
      highlight: function (str, lang) {
            if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(str, { language: lang }).value;
            } catch (__) {}
            }
            return ''; // 使用默认的高亮处理
        }
    });

    const compiledMarkdown = computed(() => md.render('````<code>1234</code>````'));

</script>

<style lang="scss" scoped>

</style>